<mat-card class="mat-elevation-z0 {{workflowSpec.is_master_spec ? 'master-status' : ''}}" [id]="workflowSpec.id">
  <mat-card-header>
    <mat-card-title fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
      <h3>{{workflowSpec.display_name}}</h3>
      <div class="action-buttons">
        <ng-container *ngTemplateOutlet="actionButtons"></ng-container>
      </div>
      <div
        *ngIf="workflowSpec.is_master_spec"
        class="master-status-label"
        matTooltip="This workflow specification controls the availability of the other workflow specifications"
      >
        Master status spec
      </div>
    </mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <dl gdAreas="field value" gdColumns="10ch auto">
      <dt>Name</dt><dd>{{workflowSpec.id}}</dd>
      <dt>Description</dt><dd>{{workflowSpec.description}}</dd>
    </dl>
    <h4>Workflow Spec Files</h4>
    <app-file-list [workflowSpec]="workflowSpec"></app-file-list>
    <div *ngIf="!workflowSpec.library">
      <h4 class="library-list">
        <mat-icon (click)="expandToggle()" class="expand" *ngIf="!showAll">chevron_right</mat-icon>
        <mat-icon (click)="expandToggle()" class="expand" *ngIf="showAll">expand_more</mat-icon>
        Included Libraries</h4>
      <app-library-list [showAll]="showAll"   [workflowSpec]="workflowSpec"></app-library-list>
    </div>
  </mat-card-content>
  <mat-card-actions>
  </mat-card-actions>
</mat-card>
